<template>
    <div>
        <q-header elevated class="bg-primary text-white">
            <q-toolbar>
                <q-btn flat round dense icon="arrow_back" @click="goBack" />
                <q-toolbar-title>设置</q-toolbar-title>
            </q-toolbar>
        </q-header>

        <q-list bordered padding>
            <q-item-label header>User Controls</q-item-label>

            <q-item clickable v-ripple>
                <q-item-section>
                    <q-item-label>Content filtering</q-item-label>
                    <q-item-label caption>
                        Set the content filtering level to restrict
                        apps that can be downloaded
                    </q-item-label>
                </q-item-section>
            </q-item>

            <q-item clickable v-ripple>
                <q-item-section>
                    <q-item-label>Password</q-item-label>
                    <q-item-label caption>
                        Require password for purchase or use
                        password to restrict purchase
                    </q-item-label>
                </q-item-section>
            </q-item>

            <q-separator spaced />
            <q-item-label header>General</q-item-label>

            <q-item tag="label" v-ripple>
                <q-item-section side top>
                    <q-checkbox v-model="check1" />
                </q-item-section>

                <q-item-section>
                    <q-item-label>Notifications</q-item-label>
                    <q-item-label caption>
                        Notify me about updates to apps or games that I downloaded
                    </q-item-label>
                </q-item-section>
            </q-item>

            <q-item tag="label" v-ripple>
                <q-item-section side top>
                    <q-checkbox v-model="check2" />
                </q-item-section>

                <q-item-section>
                    <q-item-label>Sound</q-item-label>
                    <q-item-label caption>
                        Auto-update apps at anytime. Data charges may apply
                    </q-item-label>
                </q-item-section>
            </q-item>

            <q-item tag="label" v-ripple>
                <q-item-section side top>
                    <q-checkbox v-model="check3" />
                </q-item-section>

                <q-item-section>
                    <q-item-label>Auto-add widgets</q-item-label>
                    <q-item-label caption>
                        Automatically add home screen widgets
                    </q-item-label>
                </q-item-section>
            </q-item>

            <q-separator spaced />
            <q-item-label header>外观</q-item-label>

            <q-item tag="label">
                <q-item-section>
                    <q-item-label>夜间模式</q-item-label>
                </q-item-section>
                <q-item-section side>
                    <q-btn-toggle v-model="settingProp.dark" unelevated @update:model-value="toggleDark" toggle-color="primary" :options="[
                        { label: '关闭', value: 'false' },
                        { label: '自动', value: 'auto' },
                        { label: '开启', value: 'true' }
                    ]" />
                    <!-- <q-toggle color="primary" v-model="settingProp.dark" @update:model-value="toggleDark" /> -->
                </q-item-section>
            </q-item>

            <q-item tag="label">
                <q-item-section>
                    <q-item-label>设置主题色</q-item-label>
                </q-item-section>
                <q-item-section side top>
                    <div class="row">
                        <q-input dense filled v-model="settingProp.primaryColor" style="max-width:175px">
                            <template v-slot:append>
                                <q-icon name="colorize" class="cursor-pointer">
                                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                                        <q-color v-model="settingProp.primaryColor" no-header-tabs no-footer
                                            @update:model-value="setColor" />
                                    </q-popup-proxy>
                                </q-icon>
                            </template>
                        </q-input>
                        <q-btn color="primary" flat @click="resetColor">重置</q-btn>
                    </div>
                </q-item-section>
            </q-item>

            <q-item tag="label" v-ripple>
                <q-item-section>
                    <q-item-label>Picture uploaded</q-item-label>
                    <q-item-label caption>Allow notification when uploading images</q-item-label>
                </q-item-section>
                <q-item-section side top>
                    <q-toggle color="red" v-model="notif3" val="picture" />
                </q-item-section>
            </q-item>

            <q-separator spaced />
            <q-item-label header>Other settings</q-item-label>

            <q-item>
                <q-item-section side>
                    <q-icon color="teal" name="volume_down" />
                </q-item-section>
                <q-item-section>
                    <q-slider v-model="volume" :min="0" :max="10" label color="teal" />
                </q-item-section>
                <q-item-section side>
                    <q-icon color="teal" name="volume_up" />
                </q-item-section>
            </q-item>

            <q-item>
                <q-item-section side>
                    <q-icon color="deep-orange" name="brightness_medium" />
                </q-item-section>
                <q-item-section>
                    <q-slider v-model="brightness" :min="0" :max="10" label color="deep-orange" />
                </q-item-section>
            </q-item>

            <q-item>
                <q-item-section side>
                    <q-icon color="primary" name="mic" />
                </q-item-section>
                <q-item-section>
                    <q-slider v-model="mic" :min="0" :max="50" label />
                </q-item-section>
            </q-item>
        </q-list>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useQuasar, setCssVar } from 'quasar'
import { useRouter } from "vue-router"
const router = useRouter()

const defaultColor = '#1976D2';
const $q = useQuasar()
const settingProp = reactive({
    dark: localStorage.getItem('dark') || $q.dark.mode,
    primaryColor: localStorage.getItem('primary') || defaultColor
})

const toggleDark = (e) => {
    if(e == 'true')$q.dark.set(true)
    else if(e == 'false')$q.dark.set(false)
    else $q.dark.set('auto')
    localStorage.setItem('dark', e);
}

const setColor = (e) => {
    setCssVar('primary', e);
    //保存到本地
    localStorage.setItem('primary', e);
}

const resetColor = () => {
    setCssVar('primary', defaultColor);
    settingProp.primaryColor = defaultColor
    localStorage.setItem('primary', defaultColor);
}

const check1 = ref(true)
const check2 = ref(true)
const check3 = ref(true)

const notif3 = ref(true)

const volume = ref(6)
const brightness = ref(6)
const mic = ref(6)

const goBack = () => {
    router.go(-1)
}
</script>